<template>
    <div class="login-body mainBody">
        <div class="box">
            <div class="box2">
                <div class="title">注册</div>
                <div class="box3">
                    <p class="title2">账号:</p>
                    <input type="text">
                </div>
                <div class="box3">
                    <p class="title2">密码:</p>
                    <input type="text">
                </div>
                <p>没有账号？<a @click="goToLogin">点我登录</a></p>
                <button>注册</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import router from '../../router';

const goToLogin = () => {
    router.push('login')
}
</script>

<style lang="scss" scoped>
.login-body {
    background: url(../../assets/RADWIMPS.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 350px;
        height: 350px;
        color: white;
        z-index: 10;
        backdrop-filter: blur(8px);
        border-radius: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        background: var(--table);

        .box2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 80%;

            .title {
                font-size: 1.5em;
                font-weight: 800;
            }

            .box3 {
                width: 80%;
                margin-top: 15px;
                margin-bottom: 15px;

                .title2 {
                    font-size: 0.8em;
                    margin-bottom: 5px;
                }

                input {
                    width: 100%;
                    height: 40px;
                    padding-left: 10px;
                    padding-right: 10px;
                    color: rgba(255, 255, 255, 0.9);
                    font-size: 16px;
                    background-color: rgba(255, 255, 255, 0.1);
                    border: 1px solid rgba(255, 255, 255, 0.5);
                    border-radius: 5px;
                }
            }

            button {
                margin-top: 15px;
                width: 50%;
                height: 35px;
                border-radius: 20px;
                font-size: 16px;
                font-weight: 400;
            }
        }
    }
}
</style>